<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- 2.创建容器 -->
 <div id="app">
  <h1>{{title}}</h1>
  <button @click="count--">-</button>
  <span>{{count}}</span>
  <button @click="count++">+</button>
 </div>
  <!-- 1.导入 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  // 3.创建vue实例对象 
 const app=new Vue({
  el:"#app",
  data:{
     title:"计数器标题",
     count:100,
  },
  // 生命周期函数（钩子函数） 1.创建 2.挂载 3.更新 4.销毁
  // 1.创建(出生)
  beforeCreate(){
    // 此时数据还没初始化
    console.log("beforeCreate 创建Vue实例之前",this.count);//undefined
    
  },
  created(){
    // 此时数据已经初始化
    console.log("created 创建Vue实例之后",this.count);//100
  },

  // 2.挂载（步入社会）
  beforeMount(){
    console.log(
      "beforeMount 挂载Dom之前",
       document.querySelector("h1")//<h1>{{title}}</h1>
    );
    
  },
  mounted(){
    console.log(
      "mounted 挂载Dom完成",
      document.querySelector("h1"));//<h1>计数器标题</h1>
    
  },
  // 3.更新（被监视）
  beforeUpate(){
    console.log("beforeUpate 更新Dom之前",
      document.querySelector("span").innerText
    );
    
  },
  updated(){
    console.log("updated 更新Dom完成",
      document.querySelector("span").innerText
   ); 
    
  },
    // 4.销毁（遗言）
    // 在控制台调试 app.$destroy()
    beforeDestroy(){
      console.log("beforeDestroy 销毁Vue实例之前,实例还在，做清理动作");
      
    },
    destroyed(){
      console.log("destroyed 销毁Vue实例之后");
      
    
      
    }
  
   })
</script>
</body>
</html>